<template>
  <div v-loading.fullscreen.lock="loading" :element-loading-text="$t('loading')" :class="['aui-wrapper', { 'aui-sidebar--fold': $store.state.sidebarFold }]">
    <template v-if="!loading">
      <main-navbar />
      <main-sidebar />
      <div class="aui-content__wrapper">
        <main-content v-if="!$store.state.contentIsNeedRefresh" />
      </div>
      <main-theme-tools />
    </template>
  </div>
</template>

<script>
import MainNavbar from './main-navbar'
import MainSidebar from './main-sidebar'
import MainContent from './main-content'
import MainThemeTools from './main-theme-tools'
import debounce from 'lodash/debounce'
export default {
  provide () {
    return {
      // 刷新
      refresh () {
        this.$store.state.contentIsNeedRefresh = true
        this.$nextTick(() => {
          this.$store.state.contentIsNeedRefresh = false
        })
      }
    }
  },
  data () {
    return {
      loading: true
    }
  },
  components: {
    MainNavbar,
    MainSidebar,
    MainContent,
    MainThemeTools
  },
  watch: {
    $route: 'routeHandle'
  },
  created () {
    this.windowResizeHandle()
    this.loading = false
    this.routeHandle(this.$route)
    // Promise.all([
    //   this.getUserInfo(),
    //   this.getPermissions()
    // ]).then(() => {
    //   this.loading = false
    // })
  },
  methods: {
    // 窗口改变大小
    windowResizeHandle () {
      this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
      window.addEventListener('resize', debounce(() => {
        this.$store.state.sidebarFold = document.documentElement['clientWidth'] <= 992 || false
      }, 150))
    },
    // 路由, 监听
    routeHandle (route) {
      if (!route.meta.isTab) {
        return false
      }
      // debugger
      let endStr = route.path.split('/').pop()
      let endStrFirst = endStr.split('-').shift()

      const routePage = route.path.split('/')[1]
      const routePageType = route.path.split('/')[3]

      // 正则匹配/product-course/' + route.params.category和最后一个/后面的字符串，中间随意
      // let reg = new RegExp('/product-course/' + route.params.category + (endStrFirst === 'create' ? '/' : '/[0-9]+/') + endStr)
      let reg
      if (!isNaN(endStr)) {
        // reg = new RegExp('/product-course/' + route.params.category)
        if (routePage === 'product-course') reg = new RegExp('/product-course/' + route.params.category)
        if (routePage === 'graphicMaterial' && routePageType === 'edit') reg = new RegExp(`/${routePage}/${route.params.type}/${routePageType}/${route.params.code}`)
      } else {
        reg = new RegExp('/product-course/' + route.params.category + '.*/' + endStr)
      }
      // let str = '/product-course/' + route.params.category
      var tab = this.$store.state.contentTabs.filter(
        item => item.cname === route[reg.test(route.path) ? 'path' : 'name']
      )[0]
      if (!tab) {
        tab = {
          ...window.SITE_CONFIG['contentTabDefault'],
          ...Object.assign({}, route.meta, {
            title: route.params.meta_title || route.meta.title
          }),
          name: route.name,
          params: { ...route.params },
          query: { ...route.query },
          cname: reg.test(route.path) ? route.path : route.name
        }
        // 如果为同一科目的编辑或详情，用最新的替换。其余为拼接
        // let index = this.$store.state.contentTabs.findIndex(item => reg.test(item.cname))
        // let index = this.$store.state.contentTabs.findIndex(item => reg.test(item.cname))
        // if (index > -1) {
        //   this.$store.state.contentTabs.splice(index, 1, tab)
        // } else {
        this.$store.state.contentTabs = this.$store.state.contentTabs.concat(tab)
        // }
      } else {
        tab.title = route.params.meta_title || tab.title
      }
      this.$store.state.sidebarMenuActiveName = tab.menuId
      this.$store.state.contentTabsActiveName = tab.cname
    },
    // 获取当前管理员信息
    getUserInfo () {
      return this.$http.get('/sys/user/info').then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.$store.state.user.id = res.data.id
        this.$store.state.user.name = res.data.username
        this.$store.state.user.realName = res.data.realName
        this.$store.state.user.superAdmin = res.data.superAdmin
      }).catch(() => {})
    },
    // 获取权限
    getPermissions () {
      return this.$http.get('/sys/menu/permissions').then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        window.SITE_CONFIG['permissions'] = res.data
      }).catch(() => {})
    }
  }
}
</script>
